<template>
  <div class="article-container">
    <!-- 导航栏 -->
    <van-nav-bar fixed :border="false" title="文章详情">
      <template #left>
        <van-icon name="arrow-left" @click="$router.go(-1)" />
      </template>
    </van-nav-bar>
    <!-- /导航栏 -->

    <!-- 加载图标 -->
    <van-loading size="50" v-show="flag" />
    <!-- /加载图标 -->

    <!-- 文章详情 -->
    <div class="detail">
      <h3>{{ article.title }}</h3>
      <div class="author">
        <div class="left">
          <van-image round width="40" height="40" :src="article.aut_photo" />
          <div class="desc">
            <p>{{ article.aut_name }}</p>
            <p>{{ article.pubdata | relative }}</p>
          </div>
        </div>
        <van-button
          type="info"
          size="small"
          round
          @click="clickFollowUser(article.is_followed)"
        >
          {{ article.is_followed ? '取关' : '+关注' }}
        </van-button>
      </div>
      <div class="content" v-html="article.content"></div>
    </div>
    <!-- /文章详情 -->

    <!-- 分割线 -->
    <van-divider>END</van-divider>

    <!-- 按钮 -->
    <div class="article_btn">
      <van-button
        :icon="article.attitude === 1 ? 'good-job' : 'good-job-o'"
        type="primary"
        size="small"
        plain
        round
        @click="clickLike(article.attitude)"
      >
        {{ article.attitude === 1 ? '取消点赞' : '点赞' }}
      </van-button>
      <van-button
        icon="delete-o"
        type="danger"
        size="small"
        plain
        round
        @click="clickDislikes(article.attitude)"
      >
        {{ article.attitude === 0 ? '取消不喜欢' : '不喜欢' }}
      </van-button>
    </div>

    <!-- 文章评论组件 -->
    <article-comment :art_id="art_id.toString()"></article-comment>
    <!-- /文章评论 -->
  </div>
</template>

<script>
import {
  getArticlDetail,
  postLike,
  deleteLike,
  postDislikes,
  deleteDislikes,
} from '@/api/article'
import { postFollowUser, delFollowUser } from '@/api/user'
import ArticleComment from './comment.vue'

export default {
  components: { ArticleComment },
  name: 'ArticleIndex',
  // 接收跳转页面的数据
  props: ['art_id'],
  data() {
    return {
      article: {},
      flag: true, // 控制loading的显示隐藏
    }
  },

  methods: {
    // 一、加载文章详情方法
    async loadArticleDetail() {
      // 1.1 发送请求,保存数据
      const { data } = await getArticlDetail(this.art_id)
      // console.log(data)
      this.article = data.data
      // 1.2 隐藏loading
      this.flag = false
    },

    // 二、关注/取关用户
    async clickFollowUser(isFollow) {
      // console.log(isFollow)
      try {
        // 2.1 判断是否关注了该用户 false为没有关注,那就发送关注的请求,否则反之
        if (!isFollow) {
          // 发送关注请求
          await postFollowUser(this.article.aut_id)
          this.$toast.success('关注成功')
        } else {
          // 发送取关请求
          await delFollowUser(this.article.aut_id)
          this.$toast.success('取关成功')
        }
        // 操纵完成后直接更新视图
        this.article.is_followed = !this.article.is_followed
      } catch {
        this.$toast.success('操作失败')
      }
    },

    // 三、点赞/取消点赞文章
    async clickLike(n) {
      // console.log(n)
      try {
        // 3.1 判断当前是点赞状态还是没点赞状态 点赞状态 attitude=1 反之 -1
        if (n === -1) {
          // 发送点赞请求
          await postLike(this.art_id.toString())
          this.article.attitude = 1
          this.$toast.success('点赞成功')
        } else {
          // 发送取消点赞请求
          await deleteLike(this.art_id.toString())
          this.article.attitude = -1
          this.$toast.success('取消点赞')
        }
      } catch {
        this.$toast.error('操作失败')
      }
    },

    // 四、不喜欢/取消不喜欢
    async clickDislikes(n) {
      // console.log(n)
      try {
        // 3.1 判断 attitude 的数值 -1 则发送不喜欢请求,0,则发送取消不喜欢请求
        if (n === -1) {
          // 发送不喜欢请求
          await postDislikes(this.art_id.toString())
          this.article.attitude = 0
          this.$toast.success('不喜欢')
        } else {
          // 发送取消不喜欢请求
          await deleteDislikes(this.art_id.toString())
          this.article.attitude = -1
          this.$toast.success('取消不喜欢')
        }
      } catch {
        this.$toast.error('操作失败')
      }
    },
  },
  created() {
    this.loadArticleDetail()
  },
}
</script>

<style lang="scss" scoped>
.article-container {
  position: absolute;
  left: 0;
  top: 0;
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  .van-loading {
    position: absolute;
    left: 50%;
    top: 100px;
    transform: translateX(-50%);
  }
  .detail {
    padding: 10px;
    h3 {
      font-size: 16px;
      margin: 14px 0;
    }
  }
  .author {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .left {
      display: flex;
      font-size: 14px;
      p {
        margin: 0;
      }
      p + p {
        font-size: 12px;
        color: #999;
      }
      .van-image {
        margin-right: 5px;
      }
    }
    .van-button {
      top: 4px;
    }
  }
  /deep/.content {
    width: 100%;
    font-size: 14px;
    // 解决数字以及字母超出盒子大小的问题
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-all;
    img {
      width: 100%;
    }
  }
  .article_btn {
    display: flex;
    justify-content: center;
    .van-button {
      margin-left: 8px;
    }
  }
  .van-divider {
    width: 100%;
  }
}
</style>
